<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { ref, reactive, onUpdated } from 'vue'

const value = ref("")
const value2 = reactive({ name: "" })
const value3 = ref({
  name: ""
})

onUpdated(() => {
  console.log(value.value, "value1")
  console.log(value2.name, "value2") // 注意这里访问 reactive 对象的属性
  console.log(value3.value.name, "value3")
})
</script>

<template>
  <HelloWorld>
    <template #name>
      具名
    </template>
  </HelloWorld>
  <div>
    <input v-model="value">
  </div>
  <div>
    <input v-model="value2.name">
  </div>
  <div>
    <input v-model="value3.value.name">
  </div>
</template>

<style scoped>
/* 在这里添加您的样式 */
</style>